<!--
 * @Author: DaHuaZhuXi
 * @Date: 2020-11-13 11:16:55
 * @LastEditTime: 2020-12-03 19:48:23
 * @LastEditors: DaHuaZhuXi
 * @Description:
-->
<template>
  <div class="article-manage">
    <el-table
      :data="datas"
      height="100%"
      highlight-current-row
      :default-sort="{ prop: 'id', order: 'descending' }"
      @sort-change="changeSort"
    >
      <el-table-column type="index" width="80" label="序号">
        <template slot-scope="scope">
          <span>{{
            (param.page - 1) * param.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="date" label="日期"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="param.page"
      :page-sizes="[10, 20, 40]"
      :page-size="param.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="datas.length"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { $getArticleList, getArticleList } from '../code/api';

@Component
export default class ComponentA extends Vue {
  // @initial data
  datas: object[] = [];

  // 查询参数相关
  param = {
    page: 1,
    pageSize: 10,
    sortBy: 'id',
    order: 'DESC',
  };

  // @hook
  created() {
    this.updateDatas();
  }

  mounted() {
    //
  }

  // @computed

  // @method
  updateDatas() {
    (async () => {
      const data = await $getArticleList(this, this.param);
      console.log('获取文章列表', data);
      this.datas = data;
    })();
  }

  handleSizeChange(size: number) {
    this.param.pageSize = size;
    this.updateDatas();
  }

  handleCurrentChange(currentPage: number) {
    this.param.page = currentPage;
    this.updateDatas();
  }

  // 排序变更
  changeSort(sort: { prop: string; order: string }) {
    console.log(sort);
    this.param.sortBy = sort.prop;
    this.param.order = sort.order === 'ascending' ? 'ASC' : 'DESC';
    this.updateDatas();
  }
}
</script>

<style lang="scss" scoped>
.article-manage {
  height: 100%;
  display: flex;
  flex-direction: column; //修改主轴方向
}
</style>
